<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getGiftConfigurationList"></el-button>
    <el-button type="primary" icon="el-icon-plus" style="margin:10px 0" @click="getShow">添加</el-button>
    <!-- 表格 -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column prop="id" label="id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="giftName" label="礼物名称" width="200" align="center">
      </el-table-column>
      <el-table-column label="礼物图片" align="center" width="200">
        <template slot-scope="{ row, $index }">
          <el-image
            style="width: 60px; height: 60px"
            :src="$staticURL+row.notActivePicUrl"
            :preview-src-list="[$staticURL+row.notActivePicUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="礼物动图" align="center" width="200">
        <template slot-scope="{ row, $index }">
          <el-image
            style="width: 60px; height: 60px"
            :src="$staticURL+row.activePicUrl"
            :preview-src-list="[$staticURL+row.activePicUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="costGold" label="礼物金额" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row, $index }">
          <el-tooltip content="修改礼物" placement="top" slot="reference">
            <el-button type="primary" icon="el-icon-edit" @click="ubpateBannar(row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除礼物" placement="top" slot="reference">
            <el-button type="danger" icon="el-icon-delete" @click="deleteGiftConfiguration(row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框  -->
    <el-dialog :title="state?'添加轮播图':'修改轮播图'" :visible.sync="dialogFormVisible">
      <el-form style="width:80%" :model="tmFrom" :rules="rules" ref="ruleForm">
        <el-form-item label="礼物名称" label-width="100px" prop="giftName">
          <el-input autocomplete="off" v-model="tmFrom.giftName"></el-input>
        </el-form-item>
        <el-form-item label="礼物金额" label-width="100px" prop="costGold">
          <el-input autocomplete="off" v-model="tmFrom.costGold"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="静图上传" label-width="100px" prop="picUrl">
          <el-upload class="avatar-uploader" action="https://api.yushiai.com.cn/biz/uploadImgage" :headers="headers"
            name="image" :show-file-list="false" :on-success="handleAvatarSuccessPicUrl">
            <img v-if="tmFrom.picUrl" :src="tmFrom.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">上传礼物图片,格式为jpg/jpeg/png/gif文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="动图上传" label-width="100px" prop="gifUrl">
          <el-upload class="avatar-uploader" action="https://api.yushiai.com.cn/biz/uploadImgage" :headers="headers"
            name="image" :show-file-list="false" :on-success="handleAvatarSuccessGifUrl">
            <img v-if="tmFrom.gifUrl" :src="tmFrom.gifUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">上传礼物动图,格式为jpg/jpeg/png/gif文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGiftConfiguration" v-if="state">确 定</el-button>
        <el-button type="primary" @click="updateGiftConfiguration" v-else>修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'Present',
  data() {
    return {
      // 对话框显示与隐藏控制
      dialogFormVisible: false,
      // 表单对象
      tmFrom: {
        giftName: '',
        costGold: '',
        picUrl: '',
        gifUrl: ''
      },
      //列表数据
      list: [],
      // 当前为修改还是添加 修改为false 添加为true
      state:true,
      // 表单验证
      rules: {
        giftName: [
          { required: true, message: '请输入礼物名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
        ],
        costGold: [
          { required: true, message: '请输入礼物金额', trigger: 'blur' },
          {
            transform(value) {
              return Number(value);
            },
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value > 0) {
                callback();
              } else {
                callback(new Error("请输入类型为数字，并不少于0"));
              }
            },
            trigger: "blur",
          }
        ],
        picUrl: [
          { required: true, message: '请选择礼物静图' }
        ],
        gifUrl: [
          { required: true, message: '请选择礼物动图' }
        ]
      }
    }
  },
  mounted() {
    this.getGiftConfigurationList()
  },
  computed: {
    headers() {
      return {
        'session_token': getToken()
      };
    }
  },
  methods: {
    // 所有礼物
    async getGiftConfigurationList() {
      let res = await this.$API.present.getGiftConfigurationList()
      console.log(res)
      this.list = res.data
    },
    // 上传图片
    handleAvatarSuccessPicUrl(res, file) {
      this.tmFrom.picUrl = res.data.imgageUrl;
    },
    // 上传图片
    handleAvatarSuccessGifUrl(res, file) {
      this.tmFrom.gifUrl = res.data.imgageUrl;
    },
    // 取消
    getShow() {
      this.state = true
      this.dialogFormVisible = true
      this.tmFrom =  {
        giftName: '',
        costGold: '',
        picUrl: '',
        gifUrl: ''
      }
    },
    // 添加
    addGiftConfiguration() {
      this.$refs.ruleForm.validate(async (valid)=>{
        if (valid) {
          let res = await this.$API.present.addGiftConfiguration(this.tmFrom);
          this.dialogFormVisible = false;
          this.getGiftConfigurationList();
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 点击修改
    ubpateBannar(row){
      this.state = false
      this.dialogFormVisible = true;
      // 浅拷贝  让tmFrom收到的数据非服务器直接传回的数据
      this.tmFrom = {...row};
    },
    // 点击修改
    updateGiftConfiguration(){
      this.$refs.ruleForm.validate(async (valid)=>{
        if (valid) {
          let res = await this.$API.present.updateGiftConfiguration(this.tmFrom);
          this.dialogFormVisible = false;
          this.getGiftConfigurationList();
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 删除
    async deleteGiftConfiguration(id){
      let res = await this.$API.present.deleteGiftConfiguration({id:id});
      this.getGiftConfigurationList();
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>